<template>
  <div>
    <div class="mui-numbox" data-numbox-min="1" :data-numbox-max="max">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input
        id="test"
        class="mui-input-numbox"
        type="number"
        value="1"
        @change="countChanged"
        ref="numbox"
      />
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>
<script>
import mui from '../../lib/js/mui.min.js'
export default {
  props: ['max'],
  mounted () {
    mui('.mui-numbox').numbox()
  },
  methods: {
    countChanged () {
      // console.log(this.$refs.numbox.value)
      this.$emit('getcount', parseInt(this.$refs.numbox.value))
    }
  },
  watch: {
    // 属性监听当max值发生改变时，把相应的值赋给她
    max: function (newval, oldval) {
      mui('.mui-numbox')
        .numbox()
        .setOption('max', newval)
    }
  }
}
</script>
<style lang="css" scoped>
.mui-numbox {
  height: 22px;
}
</style>
